<template>
    <router-view/>
</template>

<script>
import { watch, onMounted } from 'vue'
import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()
    
    // 更新 CSS 变量的函数
    const updateCSSVariables = (skin) => {
      document.documentElement.style.setProperty('--skin-bg-color', skin.bgColor)
      document.documentElement.style.setProperty('--skin-bg-image', `url(${skin.img})`)
    }
    
    // 页面加载时立即设置CSS变量
    onMounted(() => {
      updateCSSVariables(store.state.skin)
    })
    
    // 监听皮肤变化，更新CSS变量
    watch(
      () => store.state.skin,
      (newSkin) => {
        updateCSSVariables(newSkin)
      },
      { deep: true, immediate: true }
    )
  }
}
</script>

<style lang="less">
  @charset "utf-8";
  *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  /* body {
      font:18px/1.5,"Microsoft Yahei","Hiragino Sans GB","Heiti sc","WenQuanYi Micro Hei",snas-serif;
      color: #000;
      transform: scale(1) translate(200px, 100px); 
  } 
  */
  li {
      list-style: none;
  }
  a {
      color: #000;
      text-decoration: none;
  }
  input{
      border: none;
      outline: none;
  }
  button {
      border: none;
  }
  #app{
    width: 750px;
    height: 100vh;
  }
  :root {
    --skin-bg-color: #fb8fae;
    --skin-bg-image: url('@/assets/my/banner.png');
  }
  .top {
        background-color: var(--skin-bg-color) !important;
    }

    /* 或者对于需要背景图的页面 */
    .top_banner {
    background-image: var(--skin-bg-image) !important;
    }
    .cont_num {
      color: var(--skin-bg-color) !important;
    }
    
</style>
